<html>
  <head>
    <script src="http://maps.google.com.ar/maps/api/js?sensor=false&language=es"></script>
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="socket.io/socket.io.js"></script>
    <script src="js/anthill-geocoder.js"></script>
    <script src="js/anthill-polygon.js"></script>
    <script src="js/anthill-directionsservice.js"></script>
    <script src="js/anthill-hierarchy.js"></script>
    <script src="js/anthill-maps.js"></script>
    <script src="js/anthill-ws-manager.js"></script>
    <script src="js/anthill-ws-marker.js"></script>
    <script src="js/anthill-websockets.js"></script>
    <script>
  function init() {
    var pts = new google.maps.MVCArray();
    pts.push(new google.maps.MVCArray([new google.maps.LatLng(-31.4086, -64.19169), new google.maps.LatLng(-31.4056, -64.19109), new google.maps.LatLng(-31.4056, -64.19169)]));
    pts.push(new google.maps.MVCArray([new google.maps.LatLng(-31.4076, -64.19159), new google.maps.LatLng(-31.4046, -64.19009), new google.maps.LatLng(-31.4046, -64.19069)]));

    var pts2 =  new google.maps.MVCArray([new google.maps.LatLng(-31.409138340715057, -64.19467990478518), new google.maps.LatLng(-31.407750009402957, -64.19644147094726), new google.maps.LatLng(-31.41053365063204,-64.20236297363283)]);

    $('.map').maps([{
      class: 'Map',
      id: 'map1',
      params: {
	zoom: 12,
	center: {class: 'LatLng', params:[-31.4086, -64.19169], use: {wrapper: false}},
	mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      marker: [
	{
	  class: 'Marker',
	  params: {position: new google.maps.LatLng(-31.4086, -64.19169)},
	  iw: {
	    class: 'InfoWindow',
	    params: {content: 'Hola Mundo!!!!'}
	  }
	},
	{
	  class: 'Marker',
	  params: {position: new google.maps.LatLng(-31.4056, -64.19169)},
	  iw: {
	    class: 'InfoWindow',
	    params: {content: 'Chau pepe!!!!'}
	  }
	}],
      dirs: {
	class: 'DirectionsService',
	params: {
	  waypoints: [
	    {location: 'colon 1200, cordoba, argentina', stopover: true},
	    {location: 'real de azua 3942, cordoba, argentina', stopover: true},  
	    {location: 'teniente nivoli 73, cordoba, argentina', stopover: true} 
	  ],
	  origin: '27 de abril 1797, cordoba, argentina', 
	  destination: 'caseros 1079, cordoba, argentina',
	  travelMode: google.maps.DirectionsTravelMode.DRIVING
	}
      },
      ws: {
	class: 'Manager',
	type: 'websockets',
	evts: {
	  createMarker: function(id) {
	    alert('crear marker '+id);
	  }
	}
      }
    }, 
    {
      class: 'Map',
      id: 'map2',
      params: {
	zoom: 12,
	center: {class: 'LatLng', params:[-31.4086, -64.19169], use: {wrapper: false}},
	mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      mrk: {
	class: 'Marker',
	params: {
	  position: new google.maps.LatLng(-31.4086, -64.19169),
	  draggable: true
	},
	iw: {
	  class: 'InfoWindow',
	  params: {content: 'Hola Mundo!!!!'}
	},
	evts: {
	  drag: function(evt) {
	    if(!this.get('m')) {
	      this.set('m', new google.maps.Marker());
	      this.get('m').setMap(this.getMap());
	    }
	    var cll = $.maps.find('poligono').obj.getClosestLatLng(evt.latLng);
	    $('#log').html(cll.distance.px);
	    this.get('m').setPosition(cll.latlng);
	  }
	}
      },
      poly: [
	{
	  class: 'Polygon',
	  id: 'poligono',
	  params: {paths: pts, clickable: true, editable: true},
	  gc: {
	    class: 'Geocoder',
	    params: [['27 de abril 1797, córdoba, argentina', 'caseros 1079, córdoba, argentina']]
	  },
	  evts: {click: function(evt) { 
		  var txt = this.contains(evt.latLng)?'Yes':'No'; alert('Polygon click: '+txt);
		  }
	  },
	  dirs: {
			class: 'DirectionsService',
			params: {
			  waypoints: [
			    {location: 'colon 1200, cordoba, argentina', stopover: true},
			    {location: 'real de azua 3942, cordoba, argentina', stopover: true},  
			    {location: 'teniente nivoli 73, cordoba, argentina', stopover: true} 
			  ],
			  origin: '27 de abril 1797, cordoba, argentina', 
			  destination: 'caseros 1079, cordoba, argentina',
			  travelMode: google.maps.DirectionsTravelMode.DRIVING
			}
	  },
	  poly: {
	    class: 'Polygon',
	    id: 'innerP',
	    params: {path: pts2, editable: true, fillColor: "#FF0000"}
	  }
	},
	{
	  class: 'Polyline',
	  params: {path: pts, strokeColor: '#FFAA00'}
	}
      ],
      evts: {
	  click: function(evt) { var txt = $.maps.find('poligono').obj.contains(evt.latLng)?'Yes':'No'; alert('Map click: '+txt);}/*, 
	  idle: function() { 
	    pts2.forEach(function(e, i) {$.maps.find('map2').set('mrk_'+i, {class: 'Marker', params: {position: e}, iw: {class: 'InfoWindow', params: {content: i+''}}});});
	  }*/
      }
    }]);
  }
    </script>
<style>
  .map {
    height: 50%; 
    width: 100%;
    border: 1px solid black;
  }

  #log {
    height: 30px;
    width: 100%;
    color: red;
  }
</style>
  </head>
  <body onload="init()">
    <div id="log"></div>
    <div class="map" id="m1"></div>
    <div class="map" id="m2"></div>
  </body>
</html>
